<template>
    <el-table
					:data="state.dataList"
					highlight-current-row
					v-loading="state.loading"
					border
					style="width: 100%; height: 100%"
					:cell-style="tableStyle.cellStyle"
					stripe
					:header-cell-style="tableStyle.headerCellStyle"
					ref="tableRef"
				>
					<!-- 展开行 -->
					<el-table-column type="expand">
						<template #default="props">
							<div m="4" style="max-height: 400px; overflow-y: auto; padding: 4px">
								<div class="flex gap-2">
									<el-tag type="">{{$t('basItemRoute.processBOM')}}</el-tag>
								</div>

								<el-table :data="props.row.processBom" border stripe>
                                    <el-table-column :label="$t('basItemRoute.bomVersion')" prop="bomVersion" />
									<el-table-column :label="$t('basItemRoute.materialCode')" prop="materialCode" />
									<el-table-column :label="$t('basItemRoute.materialName')" prop="materialName"  />
									<el-table-column :label="$t('basItemRoute.unit')" prop="unit" />
                                    <el-table-column :label="$t('basItemRoute.standardQty')" prop="standardQty" >
										<template #default="scope">
											<!--根据不同的状态选择不同的颜色的tag-->
											<el-tag size="large" type="success">
												{{ scope.row.standardQty }}
											</el-tag>
										</template>
									</el-table-column>
                                    <el-table-column :label="$t('basItemRoute.actualQty')" prop="actualQty" >
										<template #default="scope">
											<!--根据不同的状态选择不同的颜色的tag-->
											<el-tag size="large" type="primary">
												{{ scope.row.actualQty }}
											</el-tag>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</template>
					</el-table-column>

					<el-table-column type="index" label="#" width="80" />
					<el-table-column prop="itemCode" :label="$t('basItemRoute.materialCode')" show-overflow-tooltip />
					<el-table-column prop="itemName" :label="$t('basItemRoute.materialName')" width="240" show-overflow-tooltip />
					<el-table-column prop="routeVerison" :label="$t('basItemRoute.routeVerison')" width="290" show-overflow-tooltip />
					<el-table-column prop="processCode" :label="$t('basItemRoute.processCode')" show-overflow-tooltip />
					<el-table-column prop="processName" :label="$t('basItemRoute.processName')" show-overflow-tooltip />
					<el-table-column prop="processSeq" :label="$t('basItemRoute.processSeq')" show-overflow-tooltip />
					<el-table-column prop="restTime" :label="$t('basItemRoute.restTime')" show-overflow-tooltip />
					<el-table-column prop="dbProcessTime" :label="$t('basItemRoute.dbProcessTime')" show-overflow-tooltip />
					<el-table-column prop="erpReportMaterial" :label="$t('basItemRoute.erpReportMaterial')" show-overflow-tooltip width="150"  >
						<template #default="scope">
                            <!--根据不同的状态选择不同的颜色的tag-->
                            <el-tag size="large" :type="scope.row.erpReportMaterial === 'Y' ? 'success' : 'danger'">
                                {{ scope.row.erpReportMaterial }}
                            </el-tag>
                        </template>
					</el-table-column>
                    <el-table-column prop="isRest" :label="$t('basItemRoute.isRest')" show-overflow-tooltip >
						<template #default="scope">
                            <!--根据不同的状态选择不同的颜色的tag-->
                            <el-tag size="large" :type="scope.row.isRest === 'Y' ? 'success' : 'danger'">
                                {{ scope.row.isRest }}
                            </el-tag>
                        </template>
					</el-table-column>
                    <el-table-column prop="isMesReport" :label="$t('basItemRoute.isMesReport')" show-overflow-tooltip >
						<template #default="scope">
                            <!--根据不同的状态选择不同的颜色的tag-->
                            <el-tag size="large" :type="scope.row.isMesReport === 'Y' ? 'success' : 'danger'">
                                {{ scope.row.isMesReport }}
                            </el-tag>
                        </template>
					</el-table-column>
                    <el-table-column prop="isErpReport" :label="$t('basItemRoute.isErpReport')" show-overflow-tooltip >
						<template #default="scope">
                            <!--根据不同的状态选择不同的颜色的tag-->
                            <el-tag size="large" :type="scope.row.isErpReport === 'Y' ? 'success' : 'danger'">
                                {{ scope.row.isErpReport }}
                            </el-tag>
                        </template>
					</el-table-column>
				</el-table>
		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</template>

<script setup lang="ts" >
import { BasicTableProps, useTable } from "/@/hooks/table";
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { getItemRouteDetailListByRouteHId } from "/@/api/platform/digital/basItemRoute";
const { t } = useI18n();
const tableRef = ref();

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: getItemRouteDetailListByRouteHId
})

// 刷新表格
const refresh = (row: any) => {
    state.queryForm.masterid = row.id
    getDataList()
}


// 暴露变量
defineExpose({
    refresh
});

const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)
</script>